<template>
	<view class="orderDetail">
		<view class="orderDetail-content">
			<view class="orderDetail-content-top">
				<view class="orderDetail-content-image-outer">
					<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
				</view>
				<view class="orderDetail-content-title">
					宠物美容造型服务
				</view>
				<view class="orderDetail-content-money">
					￥65.00
				</view>
				<view class="orderDetail-content-orderStatus">
					已完成
				</view>
			</view>
			
			<view class="orderDetail-list">
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						门店
					</view>
					<view class="orderDetail-list-inner-right">
						某某宠物医院
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						订单号
					</view>
					<view class="orderDetail-list-inner-right">
						66544817521772212922449
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						手机号
					</view>
					<view class="orderDetail-list-inner-right">
						151****8899
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						消费时间
					</view>
					<view class="orderDetail-list-inner-right">
						2022-01-04 12:10
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						付款时间
					</view>
					<view class="orderDetail-list-inner-right">
						2022-01-03 16:54
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						下单时间
					</view>
					<view class="orderDetail-list-inner-right">
						2022-01-03 16:54
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						数量
					</view>
					<view class="orderDetail-list-inner-right">
						1
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						总价
					</view>
					<view class="orderDetail-list-inner-right">
						￥66.00
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						优惠
					</view>
					<view class="orderDetail-list-inner-right red">
						-￥1.00
					</view>
				</view>
				<view class="orderDetail-list-inner">
					<view class="orderDetail-list-inner-left">
						实付
					</view>
					<view class="orderDetail-list-inner-right">
						￥65.00
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'
export default defineComponent({
	setup() {
		const { prefix_image }=config()
		const data = reactive({
			a: 1
		})
		return {
			...toRefs(data),
			prefix_image
		}
	}
})
</script>

<style lang="stylus" scoped>
.orderDetail{
	background: #F6F6F7;
	min-height: 100vh;
	overflow: hidden;
}
	.orderDetail-content{
		width: 686rpx;
		// height: 1096px;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 56rpx 32rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		.orderDetail-content-top{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.orderDetail-list{
			padding-top: 72rpx;
			.orderDetail-list-inner{
				display: flex;
				justify-content: space-between;
				padding-bottom: 46rpx;
				.orderDetail-list-inner-left{
					font-size: 28rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.orderDetail-list-inner-right{
					font-size: 28rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.orderDetail-list-inner-right.red{
					color: #FF413C;
				}
			}
		}
		.orderDetail-content-image-outer{
			image{
				width: 100rpx;
				height: 100rpx;
				margin-top: -20rpx;
				border-radius: 50%;
				border: 10rpx solid #fff;
			}
		}
		.orderDetail-content-title{
			font-size: 28rpx;
			// font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-top: 16rpx;
		}
		.orderDetail-content-money{
			font-size: 64rpx;
			// font-family: GenJyuuGothic-P-Bold, GenJyuuGothic-P;
			font-weight: bold;
			color: #111111;
			padding-top: 24rpx;
		}
		.orderDetail-content-orderStatus{
			font-size: 26rpx;
			// font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding-top: 24rpx;
		}
	}
</style>
